import React from "react";
import { createUseStyles } from 'react-jss'
let useStyle = createUseStyles({
    box:{
        backgroundColor:'yellow'
    },
    list:{
        '& li:hover':{
            backgroundColor:'pink'
        }
    }
})
class Menu extends React.Component {
    render() {
        let {box,list} = this.props;
        return <nav className={box}>
            <ul className={list}>
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
            </ul>
        </nav>
    }
}
//创建一个代理组件(函数组件)：获取基于ReactJSS编写的样式，把获取的样式基于属性传递给类组件
const ProxyComponent = function(Component){
    //Component真实要渲染的组件[例如 Menu]
    //方法执行要返回的一个函数组件：我们基于export default导出的这个组件，在App调用的也是这个组件(HOC)
    return function HOC(props){
        let sty = useStyle()
        return <Component {...props} {...sty}/>
    }
}
export default ProxyComponent(Menu);